<template>
    <div class="data-content" v-resizeob="resizeEcharts">
        <div class="top1">
            <div class="con-left fl">
                <div class="left-top">
                    <div class="info-title">7日内未开机</div>
                    <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                    <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                    <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                    <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                    <div id="echarts_7" class="charts" style="width: 100%;height:100%;"></div>
                </div>
            </div>
            <div class="con-right fr">
                <div class="right-top">
                    <div class="info-title">未开机数量TOP5</div>
                    <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                    <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                    <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                    <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                    <div id="echarts_4" class="charts" style="width: 92%;height:100%;"></div>
                </div>
            </div>
        </div>
        <div class="bottom-con">
            <img src="../assets/img/bj-1.png" alt="" class="bj-1">
            <img src="../assets/img/bj-2.png" alt="" class="bj-2">
            <img src="../assets/img/bj-3.png" alt="" class="bj-3">
            <img src="../assets/img/bj-4.png" alt="" class="bj-4">
            <el-table :data="tableData" style="width: 100%" height="100%">
                <el-table-column prop="productId" label="产品序列号" width="240" align="center">
                </el-table-column>
                <el-table-column prop="productName" label="产品名称" align="center">
                </el-table-column>
                <el-table-column prop="address" label="所在区县" align="center">
                </el-table-column>
                <el-table-column prop="unitName" label="单位名称" align="center">
                </el-table-column>
                <el-table-column prop="userDepartment" label="使用部门" align="center">
                </el-table-column>
                <el-table-column prop="userPer" label="设备负责人" align="center">
                </el-table-column>
                <el-table-column prop="manufacturerName" label="厂商名称" align="center">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: "deviceScreen",
    data() {
        return {
            aOrb: 'a',
            data: [
                {
                    key: '1',
                    productId: 'W207DL13522206080004',
                    productName: '台式计算机',
                    address: '沁县',
                    unitName: '交口小学',
                    userDepartment: '',
                    deviceManager: '张老师',
                    manufacturerName: '北方自动控制技术研究所'
                },
                {
                    key: '2',
                    productId: 'W207DL13522206080087',
                    productName: '台式计算机',
                    address: '上党',
                    unitName: '上党区第一中学',
                    userDepartment: '',
                    deviceManager: '李老师',
                    manufacturerName: '北方自动控制技术研究所'
                },
                {
                    key: '3',
                    productId: 'W207DL13522206080036',
                    productName: '台式计算机',
                    address: '壶关',
                    unitName: '壶关县八一希望小学',
                    userDepartment: '',
                    deviceManager: '刘老师',
                    manufacturerName: '北方自动控制技术研究所'
                },
            ],
            tableData: [{
                productId: 'W207DL13522206080004',
                productName: '台式计算机',
                address: '沁县',
                unitName: '交口小学',
                userDepartment: '党委',
                userPer: '张老师',
                manufacturerName: '北方自动控制技术研究所',
            }, {
                productId: 'W207DL13522206080087',
                productName: '台式计算机',
                address: '上党区',
                unitName: '上党第一小学',
                userDepartment: '教务处',
                userPer: '李老师',
                manufacturerName: '北方自动控制技术研究所',
            },
            {
                productId: 'W207DL13522206080036',
                productName: '台式计算机',
                address: '沁县',
                unitName: '交口小学',
                userDepartment: '英语教研组',
                userPer: '刘老师',
                manufacturerName: '北方自动控制技术研究所',
            },
            {
                productId: 'W207DL13522206080036',
                productName: '台式计算机',
                address: '沁县',
                unitName: '交口小学',
                userDepartment: '英语教研组',
                userPer: '刘老师',
                manufacturerName: '北方自动控制技术研究所',
            },
            {
                productId: 'W207DL13522206080036',
                productName: '台式计算机',
                address: '沁县',
                unitName: '交口小学',
                userDepartment: '英语教研组',
                userPer: '刘老师',
                manufacturerName: '北方自动控制技术研究所',
            },
            {
                productId: 'W207DL13522206080036',
                productName: '台式计算机',
                address: '潞州区',
                unitName: '潞州中学',
                userDepartment: '数学教研组',
                userPer: '王老师',
                manufacturerName: '北方自动控制技术研究所'
            }],
            myChart1: null,
            myChart2: null,
        };
    },
    mounted() {
        this.myChart1 = echarts.init(document.getElementById("echarts_7"));
        var option1;

        option1 = {
            color: ["#3398DB"],
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow"
                }
            },
            xAxis: {
                type: "category",
                data: ["壶关", "长子", "潞城", "上党", "潞州", "襄垣", "沁县", "平顺", "武乡", "沁源", "屯留", "黎城"],
                axisLine: {
                    lineStyle: {
                        show: true, //是否显示坐标轴轴线，
                        color: "#E5E5E5", //x轴轴线的颜色
                        width: 1, //x轴粗细
                    },
                },
                axisTick: {
                    show: true, //是否显示刻度
                    lineStyle: { color: "#E5E5E5" }, // x轴刻度的颜色
                },
                axisLabel: {
                    color: "#fff", // x轴字体颜色
                    interval: 0, //轴显示所有的数据
                },
            },
            yAxis: {
                type: "value",
                name: "7日内未开机",
                nameTextStyle: {
                    fontStyle: "normal",
                    fontWeight: "bold",
                    fontSize: 15
                },
                axisLine: {
                    lineStyle: {
                        show: true, //是否显示坐标轴轴线，
                        color: "#E5E5E5", //x轴轴线的颜色
                        width: 1, //x轴粗细
                    },
                },
                axisTick: {
                    show: true, //是否显示刻度
                    lineStyle: { color: "#E5E5E5" }, // x轴刻度的颜色
                },
                axisLabel: {
                    color: "#fff", // x轴字体颜色
                    interval: 0, //轴显示所有的数据
                },
            },
            series: [
                {
                    name: "未开机数",
                    data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
                    type: "bar",
                },
            ],
        };

        option1 && this.myChart1.setOption(option1);


        this.myChart2 = echarts.init(document.getElementById("echarts_4"));

        var option2;

        option2 = {
            color: ["#3398DB"],
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow"
                }
            },
            grid: {
                left: "25%",
                width: "70%"
            },
            xAxis: {
                type: "value",
                axisLine: {
                    lineStyle: {
                        show: true, //是否显示坐标轴轴线，
                        color: "#E5E5E5", //x轴轴线的颜色
                        width: 1, //x轴粗细
                    },
                },
                axisTick: {
                    show: true, //是否显示刻度
                    lineStyle: { color: "#E5E5E5" }, // x轴刻度的颜色
                },
                axisLabel: {
                    color: "#fff", // x轴字体颜色
                    interval: 0, //轴显示所有的数据
                },
            },
            yAxis: {
                type: "category",
                name: "未开机数量TOP5",
                data: ["上党区第一中学", "长子县第一中学校", "壶关县八一希望小学", "职业高级中学", "襄垣一中"],
                nameTextStyle: {
                    fontStyle: "normal",
                    fontWeight: "bold",
                    fontSize: 15
                },
                axisLine: {
                    lineStyle: {
                        show: true, //是否显示坐标轴轴线，
                        color: "#E5E5E5", //x轴轴线的颜色
                        width: 1, //x轴粗细
                    },
                },
                axisTick: {
                    show: true, //是否显示刻度
                    lineStyle: { color: "#E5E5E5" }, // x轴刻度的颜色
                },
                axisLabel: {
                    color: "#fff", // x轴字体颜色
                    interval: 0, //轴显示所有的数据
                },
            },
            series: [
                {
                    name: "未开机数",
                    data: [5, 8, 10, 17, 20],
                    type: "bar",
                },
            ],
        }
        option2 && this.myChart2.setOption(option2);
    },
    methods: {
        changeA() {
            this.aOrb = 'a'
            console.log(this.aOrb);
        },
        changeB() {
            this.aOrb = 'b'
            console.log(this.aOrb);
        },
        resizeEcharts() {
            this.myChart1.resize()
            this.myChart2.resize()
        },
    }
};
</script>

<style scoped>
@import '../css/map.css';


/* 表格部分样式
最外 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
    background-color: transparent;
    color: #93dcfe;
    font-size: 24px;
}

/* 表格内背景颜色  */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: transparent;
    border: 0px;
    color: #93dcfe;
    font-size: 16px;
    height: 5px;
    font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
    font-weight: Normal;
}

/* 去掉最下面的那一条线  */
.el-table::before {
    height: 0px;
}

/* 设置表格行高度 */
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
    padding: 0;
    height: 54px;
}

/* 修改高亮当前行颜色 */
::v-deep .el-table tbody tr:hover>td {
    background: #063570 !important;
}

/* 取消当前行高亮 */
::v-deep .el-table tbody tr {
    pointer-events: none;
}

/* 修改表头样式-加边框 */
::v-deep .el-table__header-wrapper {
    /* border: solid 1px #04c2ed; */
}

/* 表格斑马自定义颜色 */
::v-deep .el-table__row.warning-row {
    background: #063570;
}

/* 滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #063570;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    opacity: 0.5;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #0257aa;
}
</style>